<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="./jquery-3.6.0.js"></script>
</head>
<body>
    <div class="box">
        <span>
            1234
    </span>
</div>
    <div>

    </div>
    <select name="aa" id="a1">
        <option value="cpp">cpp</option>
        <option value="java">java</option>
        <option value="javascript">javascript</option>
    </select> <br>
    <input type="text" id="mytext"/> <button>click</button>
</body>
<script type="text/javascript">
    //  jquary 中html的使用
    var $box=$(".box");
    //不设置值时为获取
    console.log($box.html());
    // 设置值时相当于innerHTMl
    $box.html("<span> asd</span>");
    // 获取、设置标签中的文本值 (会覆盖)
    console.log($box.text());
    $box.text("oop");

    var $selection=$("select");
    //获取当前选中的option值
    console.log($selection.val())

    //设置当前选中的option
    $selection.val("java");
    // for(var i=0;i<$selection.length;i++)
    // {
    //     console.log($selection[i])
    // }
    
    var $btn1=$("#mytext + button");
    $btn1.click(
        function(){
            $input1=$("#mytext");
            $input1.val("Hello world");
        }
    )

</script>
</html>